<template>
  <div>
    <Tabs v-model="tab" @on-click="changeTab(tab)">
      <TabPane label="居民诉求采集" name="name1">
        <Row class="search-info-style">
          <Input v-model="param.appeal_name" clearable placeholder="诉求名称" style="width:200px;margin-right:5px;"></Input>
          <Select v-model="param.big_type" clearable filterable @on-change="changeSelectType()" style="width:200px;;margin-right:5px;">
            <Option value="1">社区回应类诉求</Option>
            <Option value="2">社会组织回应类诉求</Option>
            <Option value="3">公共服务类诉求</Option>
          </Select>
          <Select v-model="param.appeal_type_id" clearable filterable style="width:200px;;margin-right:5px;">
            <Option :value="item.id" v-for="(item, index) in dataList" v-bind:key="index">{{item.type_name}}</Option>
          </Select>
          <Button class="new-btn-sty" @click="addData()" style="float:right">
            <Icon type="md-add" /> 诉求提报
          </Button>
          <Button class="new-btn-sty" @click="searchData()" style="float:right">
            <Icon type="md-search" /> 搜索
          </Button>
        </Row>
        <Table :columns="columns" :data="questionList" border>
          <template slot-scope="{row}" slot="action">
            <Button type="success" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="publish(row)">提报</Button>
            <Button type="info" size="small" style="margin-right: 5px" @click="show(row, false)">查看</Button>
            <Button type="info" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="show(row, true)">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="deleteType(row)">删除</Button>
          </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Page class="page_style" :total="searchInfo1.totalnum" :current="searchInfo1.currentPageNo"
              :page-size="searchInfo1.currentPageSize" @on-change="changePageNo1" show-total  show-sizer @on-page-size-change="size1"/>
      </TabPane>
      <TabPane label="已提报诉求列表" name="name2">
        <Table :columns="columns1" :data="questionList1" border>
          <template slot-scope="{row}" slot="action">
            <Button type="success" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="publish(row)">提报</Button>
            <Button type="info" size="small" style="margin-right: 5px" @click="show(row, 'show')">查看</Button>
            <Button type="info" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="show(row, 'edit')">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="deleteType(row)">删除</Button>
            <Button type="error" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="deleteType(row)">删除</Button>
            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state == '1'" @click="dealwith(row)">处理</Button>
            <Button type="warning" size="small" style="margin-right: 5px" v-if="row.state == '2'" @click="dealComplete(row)">处理完成</Button>
          </template>
        </Table>
      </TabPane>
    </Tabs>
    <Drawer title="诉求详情" v-model="drawer1" width="720" :styles="styles">
      <Form :model="formData">
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="诉求标题" label-position="top">
              <Input v-model="formData.appeal_name" placeholder="请填写诉求标题" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="联系电话" label-position="top">
              <Input v-model="formData.tel" placeholder="请填写联系电话" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="诉求类别" label-position="top">
              <Select v-model="formData.big_type" @on-change="changeType()">
                <Option value="1">社区回应类诉求</Option>
                <Option value="2">社会组织回应类诉求</Option>
                <Option value="3">公共服务类诉求</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="诉求子类" label-position="top">
              <Select v-model="formData.appeal_type_id">
                <Option :value="item.id" v-for="(item, index) in dataList" v-bind:key="index">{{item.type_name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="诉求内容" label-position="top">
              <Input type="textarea" row="5" v-model="formData.appeal_info" placeholder="请填写诉求内容" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32" v-if="formData.state === '3'">
          <Col span="24">
            <FormItem label="处理结果" label-position="top">
              <Input type="textarea" row="5" v-model="formData.deal_idea" placeholder="处理结果" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
        <Button type="primary" v-if="addFlag == true" @click="complete()">确定</Button>
      </div>
    </Drawer>
    <Drawer title="处理详情" v-model="drawer2" width="720" :styles="styles">
      <Form :model="formData1">
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="处理过程和结果" label-position="top">
              <Input type="textarea" v-model="formData1.deal_idea" row="5" placeholder="请填写处理过程和结果" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer2 = false">取消</Button>
        <Button type="primary" v-if="addFlag1 == true" @click="complete1()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import './index.less'
import { updateDelAppeal, appealTypeList, appealWithPageList, appealWithPageSQList, infoAppeal, updateAppeal, addAppeal } from '@/api/qstbV2'
export default {
  name: 'training_question',
  data () {
    return {
      tab: 'name1',
      loadData: false,
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'

        },
        {
          title: '诉求分类',
          key: 'big_type_dict',
          align: 'center'
        },
        {
          title: '诉求子类',
          key: 'type_name',
          align: 'center'
        },
        {
          title: '诉求名称',
          key: 'appeal_name',
          align: 'center'
        },
        {
          title: '诉求名称',
          key: 'tel',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state_dict',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      columns1: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'

        },
        {
          title: '诉求分类',
          key: 'big_type_dict',
          align: 'center'
        },
        {
          title: '诉求子类',
          key: 'type_name',
          align: 'center'
        },
        {
          title: '诉求名称',
          key: 'appeal_name',
          align: 'center'
        },
        {
          title: '诉求名称',
          key: 'tel',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state_dict',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      dataList: [],
      formData: {},
      formData1: {},
      drawer1: false,
      drawer2: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      studySecond: 0,
      isTrue: true,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      param1: {
        pageNo: 1,
        pageSize: 10
      },
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      searchInfo1: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      questionList: [], // 采集的居民的诉求列表
      questionList1: [], // 提报的诉求列表
      systemList: [], // 系统类型
      addFlag: true,
      addFlag1: true
    }
  },
  components: {},
  computed: {},
  mounted () {
    this.init()
    this.init1()
  },
  methods: {
    show (item, flag) {
      this.drawer1 = true
      this.addFlag = flag
      console.log(this.addFlag, '^^^^^^')
      infoAppeal({ id: item.id }).then(res => {
        if (res.data.errcode === 0) {
          this.formData = res.data.data
          if (this.formData.big_type) {
            this.getDownType(this.formData.big_type)
          }
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    complete () { // 诉求提报
      let url = ''
      if (this.formData.id) {
        url = updateAppeal
      } else {
        url = addAppeal
      }
      url(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '诉求提报成功'
          })
          this.drawer1 = false
          this.init()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    complete1 () { // 填写处理完成结果
      this.formData1.state = '3'
      if (confirm('确定处理完成了吗？')) {
        updateAppeal(this.formData1).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '处理完成'
            })
            this.drawer2 = false
            this.init1()
            return
          }
          this.$Notice.error({
            title: '错误提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    addData () {
      this.addFlag = true
      this.drawer1 = true
      this.formData = {}
    },
    deleteType (item) { // 删除诉求
      if (confirm('确定删除该诉求吗')) {
        updateDelAppeal({ id: item.id }).then(res => {
          if (res.data.errcode === 0) {
            title.$Notice.success({
              title: '成功提示',
              desc: '删除成功'
            })
            return
          }
          title.$Notice.error({
            title: '失败提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    init () { // 列表数据
      appealWithPageList(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.questionList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          return
        }
        this.$$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    init1 () { // 已提报列表数据
      appealWithPageSQList(this.param1).then(res => {
        if (res.data.errcode === 0) {
          this.questionList1 = res.data.data.results
          this.searchInfo1.totalnum = res.data.data.totalRecord
          return
        }
        this.$$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    searchData () { // 搜索
      // this.searchInfo.pageNo = 1
      this.searchInfo.currentPageNo = 1
      this.param.pageNo = 1
      this.init()
    },
    changePageNo (pageNo) {
      console.log(pageNo)
      this.param.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.param.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo1 (pageNo) {
      console.log(pageNo)
      this.param1.pageNo = pageNo
      this.init1()
    },
    size1 (pageSize) {
      this.searchInfo1.currentPageSize = pageSize
      this.param1.pageSize = pageSize
      this.changePageNo1(1)
    },
    publish (item) { // 提报
      if (confirm('确定提报该诉求吗？')) {
        updateAppeal({ id: item.id, state: '1' }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '提报成功'
            })
            this.init()
            return
          }
          this.$Notice.error({
            title: '错误提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    changeType () { // 选择一级类别
      this.getDownType(this.formData.big_type)
    },
    changeSelectType () { // 搜索框选择一级类别
      this.getDownType(this.param.big_type)
    },
    getDownType (id) { // 列表数据
      console.log(id, '#####n')
      appealTypeList({ big_type: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    changeTab (tab) {
      if (tab === 'name1') {
        this.init()
      } else if (tab === 'name2') {
        this.init1()
      }
    },
    dealwith (item) { // 开始处理
      updateAppeal({ id: item.id, state: '2' }).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '开始处理'
          })
          this.init1()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    dealComplete (item) { // 处理完成
      this.drawer2 = true
      this.formData1.id = item.id
    }
  }
}
</script>
